<script lang="ts" setup>
import { useRoute } from 'vue-router';

import { Page } from '@vben/common-ui';
import { $t } from '@vben/locales';

import {
  ElButton,
  ElCard,
  ElCheckTag,
  ElForm,
  ElFormItem,
  ElLink,
  ElMessage,
  ElMessageBox,
  ElOption,
  ElPagination,
  ElPopover,
  ElSelect,
  ElTable,
  ElTableColumn,
} from 'element-plus';

import {
  deleteSharePreviewApi,
  searchDramaShareApi,
  searchSharePreviewApi,
} from '#/api';

import FromModal from './components/from.vue';

// console.log(route.params);

import { ref } from 'vue';

import ExtraDrawer from './components/preview.vue';

const route = useRoute();

const name: string = decodeURIComponent(route.params.name?.toString() || '');
const sname: string = decodeURIComponent(route.params.sname?.toString() || '');

const fromModalRef = ref();

const dramaId: number = Number.parseInt(route.params.id?.toString() || '0');
const seasonId: number = Number.parseInt(route.params.sid?.toString() || '0');

const total = ref(0);
const queryForm = ref({
  dramaId,
  seasonId,
  pageNum: 1,
  pageSize: 10,
  cloudType: 'no',
  videoType: 'no',
  videoResolution: 'no',
});

interface DramaResourceSearchItem {
  last_count: number;
  create_time: string;
  meShare: boolean;
  video_resolution: string;
  share_status: string;
  season_name: string;
  resource_code: string;
  last_name: string;
  season_id: number;
  video_type: string;
  re_config: string;
  update_time: string;
  cloud_type: string;
  resource_link: string;
  drama_name: string;
  user_id: number;
  nickname: string;
  id: string;
  drama_id: number;
  status: string;
}

const dramaShareData = ref<DramaResourceSearchItem[]>([]);

const initDramaResourceList = async () => {
  const res = await searchDramaShareApi(queryForm.value);
  total.value = res.total;
  dramaShareData.value = res.data;
};

initDramaResourceList();

const handleSizeChange = () => {
  initDramaResourceList();
};
const handleCurrentChange = () => {
  initDramaResourceList();
};

function openModal() {
  fromModalRef.value.setData({
    id: route.params.id,
    sid: route.params.sid,
    name,
    sname,
    externalApi: { initDramaResourceList },
  });
  fromModalRef.value.open();
}

const extraModalRef = ref();

const previewData = async (id: string, status: boolean) => {
  const dramaPreview = await searchSharePreviewApi({ id });
  if (dramaPreview?.status !== status) {
    initDramaResourceList();
  }
  extraModalRef.value.setData(dramaPreview);
  extraModalRef.value.open();
};

const deleteData = async (id: string) => {
  ElMessageBox.confirm($t('subscribe.drama.share.deleteTips'))
    .then(async () => {
      await deleteSharePreviewApi({ id });
      ElMessage({
        message: $t('subscribe.drama.share.deletesuccess'),
        type: 'success',
      });
      initDramaResourceList();
    })
    .catch(() => {
      ElMessage({
        message: $t('subscribe.drama.share.deletefail'),
        type: 'success',
      });
    });
};
</script>

<template>
  <Page :description="sname" :title="name">
    <ElCard>
      <div class="form-style">
        <ElForm :inline="true" class="form-inline" label-position="left">
          <ElFormItem
            :label="$t('subscribe.drama.share.cloudType')"
            label-position=""
          >
            <ElSelect v-model="queryForm.cloudType">
              <ElOption
                :label="$t('subscribe.drama.share.unlimited')"
                value="no"
              />
              <ElOption
                :label="$t('subscribe.drama.share.quarkpan')"
                value="quarkpan"
              />
              <ElOption
                :label="$t('subscribe.drama.share.alipan')"
                value="alipan"
              />
            </ElSelect>
          </ElFormItem>

          <ElFormItem
            :label="$t('subscribe.drama.share.videoType')"
            label-position=""
          >
            <ElSelect v-model="queryForm.videoType">
              <ElOption
                :label="$t('subscribe.drama.share.unlimited')"
                value="no"
              />
              <ElOption label="mkv" value="mkv" />
              <ElOption label="mp4" value="mp4" />
            </ElSelect>
          </ElFormItem>

          <ElFormItem
            :label="$t('subscribe.drama.share.videoResolution')"
            label-position=""
          >
            <ElSelect v-model="queryForm.videoResolution">
              <ElOption
                :label="$t('subscribe.drama.share.unlimited')"
                value="no"
              />
              <ElOption label="320x480" value="320x480" />
              <ElOption label="640x480" value="640x480" />
              <ElOption label="960x540" value="960x540" />
              <ElOption label="1280x720" value="1280x720" />
              <ElOption label="1920x1080" value="1920x1080" />
              <ElOption label="2560x1440" value="2560x1440" />
              <ElOption label="3840x2160" value="3840x2160" />
              <ElOption label="7680x4320" value="7680x4320" />
            </ElSelect>
          </ElFormItem>

          <ElFormItem>
            <ElButton type="primary" @click="openModal">
              {{ $t('subscribe.drama.share.add') }}
            </ElButton>
          </ElFormItem>

          <ElFormItem>
            <ElButton type="success" @click="initDramaResourceList">
              {{ $t('subscribe.drama.share.search') }}
            </ElButton>
          </ElFormItem>
        </ElForm>
      </div>

      <FromModal ref="fromModalRef" />
      <ElTable :data="dramaShareData" style="width: 100%">
        <ElTableColumn
          :label="$t('subscribe.drama.share.cloudType')"
          align="center"
          prop="cloud_type"
        >
          <template #default="scope">
            <ElPopover
              v-show="scope.row.status === 'error'"
              effect="light"
              placement="right"
              trigger="hover"
              width="auto"
            >
              <template #default>
                <ElCheckTag :checked="true" type="danger">
                  {{ scope.row.msg }}
                </ElCheckTag>
              </template>
              <template #reference>
                <ElLink
                  v-show="scope.row.status === 'error'"
                  :href="scope.row.resource_link"
                  :underline="false"
                  target="_blank"
                >
                  <ElCheckTag :checked="true" type="danger">
                    {{ $t(`subscribe.drama.share.${scope.row.cloud_type}`) }}
                  </ElCheckTag>
                </ElLink>
              </template>
            </ElPopover>

            <ElLink
              v-show="scope.row.status === 'ok'"
              :href="scope.row.resource_link"
              :underline="false"
              target="_blank"
            >
              <ElCheckTag :checked="true" type="primary">
                {{ $t(`subscribe.drama.share.${scope.row.cloud_type}`) }}
              </ElCheckTag>
            </ElLink>
          </template>
        </ElTableColumn>

        <ElTableColumn
          :label="$t('subscribe.drama.share.videoType')"
          align="center"
          prop="video_type"
        >
          <template #default="scope">
            <ElCheckTag :checked="true" type="success">
              {{
                scope.row.video_type === 'no'
                  ? $t('subscribe.drama.share.unlimited')
                  : scope.row.video_type
              }}
            </ElCheckTag>
          </template>
        </ElTableColumn>

        <ElTableColumn
          :label="$t('subscribe.drama.share.videoResolution')"
          align="center"
          prop="video_resolution"
        >
          <template #default="scope">
            <ElCheckTag :checked="true" type="primary">
              {{
                scope.row.video_resolution === 'no'
                  ? $t('subscribe.drama.share.unlimited')
                  : scope.row.video_resolution
              }}
            </ElCheckTag>
          </template>
        </ElTableColumn>

        <ElTableColumn
          :label="$t('subscribe.drama.share.resourceCode')"
          align="center"
          prop="resource_code"
        >
          <template #default="scope">
            <ElCheckTag :checked="true" type="success">
              {{
                scope.row.resource_code || $t('subscribe.drama.share.noPassWd')
              }}
            </ElCheckTag>
          </template>
        </ElTableColumn>

        <ElTableColumn
          :label="$t('subscribe.drama.share.shareUser')"
          align="center"
          prop="nickname"
        >
          <template #default="scope">
            <ElCheckTag
              :checked="true"
              :type="scope.row.meShare ? 'warning' : 'info'"
            >
              {{ scope.row.nickname }}
            </ElCheckTag>
          </template>
        </ElTableColumn>

        <ElTableColumn
          :label="$t('subscribe.drama.share.lastCount')"
          align="center"
          prop="last_count"
        >
          <template #default="scope">
            <ElPopover
              effect="light"
              placement="top"
              trigger="hover"
              width="auto"
            >
              <template #default>
                <ElCheckTag :checked="true" type="warning">
                  {{ scope.row.last_name }}
                </ElCheckTag>
              </template>
              <template #reference>
                <ElCheckTag
                  :checked="true"
                  :type="
                    scope.row.share_status === 'updated' ? 'success' : 'primary'
                  "
                >
                  {{ scope.row.last_count }}
                </ElCheckTag>
              </template>
            </ElPopover>
          </template>
        </ElTableColumn>

        <ElTableColumn
          :label="$t('subscribe.drama.share.resourceOperation')"
          align="center"
          prop="status"
          width="228px"
        >
          <template #default="scope">
            <ElButton
              v-show="scope.row.meShare"
              :checked="true"
              plain
              type="danger"
              @click="deleteData(scope.row.id)"
            >
              {{ $t('subscribe.drama.share.delete') }}
            </ElButton>
            <ElButton
              :checked="true"
              plain
              type="success"
              @click="previewData(scope.row.id, scope.row.status)"
            >
              {{ $t('subscribe.drama.share.preview') }}
            </ElButton>
            <ElButton :checked="true" plain type="warning">
              {{ $t('subscribe.drama.share.transfer') }}
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <ElPagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :background="true"
        :page-sizes="[10, 20, 30, 40]"
        :pager-count="5"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        style="float: right; margin-top: 15px; margin-bottom: 15px"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </ElCard>
  </Page>
  <ExtraDrawer ref="extraModalRef" />
</template>

<style lang="css" scoped>
.form-inline .el-input {
  --el-input-width: 150px;
}

.form-inline .el-select {
  --el-select-width: 150px;
}

.form-style {
  align-items: center;
  margin-right: 1%;
  margin-left: 1%;
}
</style>
